<template>
  <div class="caigouruku-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="12">
        <el-button :icon="Search" plain type="primary" @click="openQueryDialog">
          查询
        </el-button>
        <el-button
          :disabled="!currentDetailRow"
          plain
          type="primary"
          @click="shengma"
        >
          <vab-icon icon="barcode-fill" />
          &nbsp;生&nbsp;码
        </el-button>
        <el-button
          :disabled="!currentDetailRow"
          :icon="Postcard"
          plain
          type="primary"
          @click="inspect"
        >
          报检
        </el-button>
        <el-button
          :disabled="!currentDetailRow"
          :icon="Download"
          plain
          type="primary"
          @click="syncInv"
        >
          同步
        </el-button>
      </vab-query-form-left-panel>
    </vab-query-form>
    <el-table
      :cell-style="{ padding: '6px 6px' }"
      :data="cgdhList"
      highlight-current-row
      @current-change="handleCurrentChange"
    >
      <el-table-column label="序号" type="index" width="80" />
      <el-table-column label="单号单id" prop="id" width="120" />
      <el-table-column label="到货单号" prop="cCode" width="120" />
      <el-table-column label="制单人" prop="cMaker" width="120" />
      <el-table-column label="业务类型" prop="cBusType" width="180" />
      <el-table-column label="采购类型" prop="cPTName" width="180" />
      <el-table-column label="供应商" prop="cVenName" width="220" />
      <el-table-column label="单据日期" prop="dDate" width="180" />
      <el-table-column label="制单日期" prop="cMakeTime" width="180" />
      <el-table-column label="备注" prop="cMemo" />
    </el-table>
    <el-pagination
      background
      :current-page="paginationParams.pageNum"
      :layout="layout"
      :page-size="paginationParams.pageSize"
      :total="paginationParams.total"
      @current-change="handlePaginationCurrentChange"
      @size-change="handlePaginationSizeChange"
    />
    <div style="height: 28px"></div>
    <el-table
      :cell-style="{ padding: '6px 6px' }"
      :data="cgdhDetailList"
      highlight-current-row
      @current-change="handleCurrentDetailChange"
    >
      <el-table-column label="序号" type="index" width="80" />
      <el-table-column label="存货编码" prop="cInvCode" width="200" />
      <el-table-column label="存货名称" prop="cInvName" width="200" />
      <el-table-column label="规格型号" prop="cInvStd" width="200" />
      <el-table-column label="同步" width="100">
        <template #default="scope">
          <el-icon v-if="scope.row.pkInv != null" color="#30DF80" size="20">
            <Select />
          </el-icon>
          <el-icon v-else color="#DF3730" size="20">
            <SemiSelect />
          </el-icon>
        </template>
      </el-table-column>
      <el-table-column label="应到数量" width="150">
        <template #default="scope">
          <span style="font-size: 16px; font-weight: 600; color: #5314bd">
            {{ scope.row.iQuantity }}&nbsp;{{ scope.row.cComUnitName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="实到数量" width="150">
        <template #default="scope">
          <span style="font-size: 16px; font-weight: 600; color: #5314bd">
            {{ scope.row.fValidInQuan }}&nbsp;{{ scope.row.cComUnitName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="仓库" prop="cWhName" width="150" />
      <el-table-column label="检验" width="100">
        <template #default="scope">
          <el-icon v-if="scope.row.needCheck" color="#30DF80" size="20">
            <Select />
          </el-icon>
          <el-icon v-else color="#DF3730" size="20">
            <SemiSelect />
          </el-icon>
        </template>
      </el-table-column>
      <el-table-column label="报检" width="100">
        <template #default="scope">
          <el-icon v-if="scope.row.qty > 0" color="#30DF80" size="20">
            <Select />
          </el-icon>
          <el-icon v-else color="#DF3730" size="20">
            <SemiSelect />
          </el-icon>
        </template>
      </el-table-column>
      <el-table-column label="报检数量" width="130">
        <template #default="scope">
          <span style="font-size: 16px; font-weight: 600; color: #5314bd">
            {{ scope.row.qty }}&nbsp;{{ scope.row.cComUnitName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="已检数量" width="130">
        <template #default="scope">
          <span style="font-size: 16px; font-weight: 600; color: #5314bd">
            {{ scope.row.checkQty }}&nbsp;{{ scope.row.cComUnitName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="合格数" width="130">
        <template #default="scope">
          <span style="font-size: 16px; font-weight: 600; color: #5314bd">
            {{ scope.row.qualifiedQty }}&nbsp;{{ scope.row.cComUnitName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="不合格" width="130">
        <template #default="scope">
          <span style="font-size: 16px; font-weight: 600; color: #e62b46">
            {{ scope.row.unqualifiedQty }}&nbsp;{{ scope.row.cComUnitName }}
          </span>
        </template>
      </el-table-column>
    </el-table>
    <queryDialog ref="queryDialogRef" @success-callback="queryCallback" />
    <addBarCode ref="addBarCodeRef" />
  </div>
</template>

<script setup>
  import {
    Search,
    Postcard,
    Select,
    SemiSelect,
    Download,
  } from '@element-plus/icons-vue'
  import { getDaohuoBullApi, getDaohuoBullSApi } from '@/api/wms/caigou'
  import { daohuoSyncInvApi } from '@/api/base/inventory'
  import { localStorageConfig } from '@/config/localstorage.config'
  import queryDialog from './modules/queryDialog.vue'
  import addBarCode from './modules/addBarCode.vue'
  import { daohuoRerportInspectApi } from '@/api/qm/reportInspectApi'

  const $baseLoading = inject('$baseLoading')
  const $baseMessage = inject('$baseMessage')

  const pkCorp = localStorage.getItem(localStorageConfig.__pkCorp)

  const queryForm = ref({ pkCorp: pkCorp })
  const cgdhList = ref()
  const cgdhDetailList = ref()
  const currentDetailRow = ref()
  const currentHid = ref()

  const paginationParams = reactive({
    pageNum: 1,
    pageSize: 10,
    total: 0,
  })

  //#region pagintion 开始
  const layout = ref('prev, pager, next')
  const handlePaginationCurrentChange = (...args) => {
    paginationParams.pageNum = args[0] ? args[0] : 1
  }

  const queryDialogRef = ref()
  const addBarCodeRef = ref()

  const getCgdhList = async () => {
    const load = $baseLoading()
    try {
      let params = {
        ...queryForm.value,
        ...paginationParams,
      }
      const { code, msg, data } = await getDaohuoBullApi(params)
      if (code === 2000) {
        $baseMessage(msg, 'success')
        cgdhList.value = data.list
        paginationParams.total = data.total
      } else {
        $baseMessage(msg, 'error')
      }
    } finally {
      load.close()
    }
  }

  const openQueryDialog = () => {
    queryDialogRef.value.openDialog()
  }

  const queryCallback = (value) => {
    queryForm.value = value
    getCgdhList()
  }

  const handleCurrentChange = async (row) => {
    currentHid.value = row.id
    getDaohuoBullS()
  }

  const getDaohuoBullS = async () => {
    let params = {
      id: currentHid.value,
      pkCorp: pkCorp,
    }
    const { code, data } = await getDaohuoBullSApi(params)
    if (code == 2000) {
      cgdhDetailList.value = data
    }
  }

  const handleCurrentDetailChange = (row) => {
    currentDetailRow.value = row
  }

  const inspect = async () => {
    if (currentDetailRow.value.pkInv == null) {
      $baseMessage('该存货还未同步到MOM中，请先同步', 'warning')
      return
    }
    if (!currentDetailRow.value.needCheck) {
      $baseMessage('该存货无需检验', 'warning')
      return
    }
    const load = $baseLoading()
    try {
      currentDetailRow.value.pkCorp = pkCorp
      const { code, msg } = await daohuoRerportInspectApi(
        currentDetailRow.value
      )
      if (code === 2000) {
        getDaohuoBullS()
        $baseMessage(msg, 'success')
      } else {
        $baseMessage(msg, 'error')
      }
    } finally {
      load.close()
    }
  }

  const syncInv = async () => {
    const load = $baseLoading()
    try {
      currentDetailRow.value.pkCorp = pkCorp
      const { code, msg } = await daohuoSyncInvApi(currentDetailRow.value)
      if (code === 2000) {
        getDaohuoBullS()
        $baseMessage(msg, 'success')
      } else {
        $baseMessage(msg, 'error')
      }
    } finally {
      load.close()
    }
  }

  const shengma = () => {
    if (currentDetailRow.value.pkInv == null) {
      $baseMessage('该存货还未同步到MOM中，请先同步', 'warning')
      return
    }
    addBarCodeRef.value.openAddBarDialog(currentDetailRow.value)
  }

  watch(paginationParams, () => getCgdhList())

  onMounted(() => getCgdhList())
</script>
